<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录</title>
		<link rel="stylesheet" href="${ctx }/css/bootstrap.css" />
		<link rel="stylesheet" href="${ctx }/css/ladda-themeless.css" />
		
	</head>
	<body>
		<div class="navbar-inverse navbar"
			style="background-color: #337AB7;
			border-color:#337AB7 ;
			border-radius: 0px;">
			<div class="navbar-header">
				<img src="${ctx }/img/loginlogo.png" style="padding: 20px;"/>
			</div>
		</div>
		<div style="min-height: 600px;margin-top: 30px;">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<h4 style="border-bottom: 2px solid #337AB7;
							height: 40px;font-size: 20px;
							font-weight: bold;color: #337AB7;">
							系统登录
							<span class="label label-warning">学号登录</span>
						</h4>
					</div>
				</div>
				
				<div class="row">
					<div class="col-md-6">
						<h3>授权登录:微信/QQ</h3>
						<br />
						<button class="btn btn-success">微信登录</button>
						&nbsp;或者&nbsp;
						<button class="btn btn-primary">QQ登录</button>
						<hr />
						<h4>现使用<strong>学生学号</strong>登录:</h4>
						<br />
						<form id="loginForm">
							<div class="form-group">
								<label class="control-label">学生学号:</label>
								<input type="text" class="form-control" name="loginName" />	
							</div>
							<div class="form-group">
								<label class="control-label">密码:</label>
								<input type="password" class="form-control" 
									name="password" data-toggle="password"/>	
							</div>
						</form>
						<hr />
						<button class="btn btn-danger ladda-button" 
							data-style="slide-left" 
 							style="width: 150px;height: 35px;">
							<span class="ladda-label" >登录系统</span>
						</button>
					</div>
					<div class="col-md-6">
						<div class="alert alert-info">
							Bootstrap 安装是非常容易的。本章将讲解如何下载并安装 Bootstrap，讨论 Bootstrap 文件结构，并通过一个实例演示它的用法。
							<br />
							<strong>它的一些特点如下:</strong>
							<ul>
								<li>使用了响应式布局</li>
								<li>使用了响应式布局</li>
								<li>使用了响应式布局</li>
								<li>使用了响应式布局</li>
								<li>使用了响应式布局</li>
							</ul>
						</div>
						<div class="alert alert-danger">
							Bootstrap 安装是非常容易的。本章将讲解如何下载并安装 Bootstrap，讨论 Bootstrap 文件结构，并通过一个实例演示它的用法。
							<br />
							<strong>它的一些特点如下:</strong>
							<ul>
								<li>使用了响应式布局</li>
								<li>使用了响应式布局</li>
								<li>使用了响应式布局</li>
								<li>使用了响应式布局</li>
								<li>使用了响应式布局</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			
		</div>
		<div class="navbar navbar-fixed-bottom" 
			style="background-color: #337AB7;
			height: 30px;">
			<div class="container">
				<div class="col-md-12" style="color: #fff;padding: 10px;">
					&copy;2019 未来高创科技集团|By:<a href="#"style="color: #fff;">featureTechnology.hqj.com</a>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="${ctx }/js/jquery-1.11.1.js" ></script>
		<script type="text/javascript" src="${ctx }/js/bootstrap.js" ></script>
		<script type="text/javascript" src="${ctx }/js/boostrap-show-password.js" ></script>
		<script type="text/javascript" src="${ctx }/js/spin.js" ></script>
		<script type="text/javascript" src="${ctx }/js/ladda.js" ></script>
		
		<script type="text/javascript">
			//Ladda.bind('.ladda-button',{timeout:2000});
			$(".ladda-button").click(function(){
				var l = Ladda.create(document.querySelector('.ladda-button'));
				l.start();
				var f = $('#loginForm');
				$.ajax({
					type:'post',
					url:'${ctx}/sys/toLogin',
					data:f.serialize(),
					dataType:'json',
					success:function(r){
						alert(r.msg);
						if(r.sus){
							l.stop;
							window.location.href='${ctx}/sys/index';
						}
					}
				});
			});
			
			
			
		</script>
	</body>
</html>
